<template>
    <div>
        <div class="boosLists_box">
            <div class="header">
                <div>
                    <i class="iconfont icon-zuojiantou">
                </i></div>
                <input type="text" placeholder="日韩动漫 共33042个结果">
                <div>筛选</div>
                <i class="iconfont icon-sousuo"></i>
            </div>
            <div class="category_box">
                <div class="top">
                    <div class="left">
                        <span>动漫/幽默</span> &gt;
                        <span>日韩动漫</span>
                    </div>
                    <div v-if="flag" @click="changeBtn">
                        展开
                        <i class="iconfont icon-xiala"></i>
                    </div>
                    <div v-if="!flag" @click="changeback">
                        收起
                        <i class="iconfont icon-shangla"></i>
                    </div>
                </div>
                <div class="bottom">
                    <ul ref="ul" style="height:76px">
                        <li v-for="(item,index) in booksLists" 
                        :key="index" 
                        :class="{active:index==0}" 
                        @click="change(index)" 
                        >{{item}} </li>
                    </ul>
                </div>
                <div class="navCommon">
                    <div class="active">默认</div>
                    <div>销量</div>
                    <div>价格</div>
                    <div>好评</div>
                    <div>出版时间</div>
                </div>
                <div class="content">
                    <div class="item">
                        <img src="../assets/images/25583206-1_h.jpg" alt="">
                        <div class="text">
                            <p class="name">千与千寻（宫崎骏作品。日本上映20周年特别纪念！）</p>
                            <p class="author">(日) 宫崎骏原作</p>
                            <div class="lable">
                                <span>自营</span>
                                <span class="jian">每满100-50</span>
                            </div>
                            <p class="price">￥<span class="middle">78</span>.00 </p>
                            <p class="allremark">100.0%好评(5446人)</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="../assets/images/25583206-1_h.jpg" alt="">
                        <div class="text">
                            <p class="name">千与千寻（宫崎骏作品。日本上映20周年特别纪念！）</p>
                            <p class="author">(日) 宫崎骏原作</p>
                            <div class="lable">
                                <span>自营</span>
                                <span class="jian">每满100-50</span>
                            </div>
                            <p class="price">￥<span class="middle">78</span>.00 </p>
                            <p class="allremark">100.0%好评(5446人)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                booksLists:[
                    "全部",
                    "樱桃小丸子",
                    "龙珠",
                    "名侦探柯南",
                    "韩国漫画",
                    "蜡笔小新",
                    "其他日本漫画",
                    "机器猫",
                    "神奇宝贝",
                    "网球王子",
                    "灌篮高手",
                    "头文字D",
                    "CLAMP出品",
                    "金田一少年事件簿",
                    "奥特曼",
                    "机动战士高达",
                    "乱马",
                    "超级酷乐猫",
                    "犬夜叉",
                    "棋魂",
                    "闪灵二人组棒球英豪",
                    "侦探学园"
                ],
                flag:true,
            }
        },
        methods:{
            change(option){
                console.log(option);
                console.log(this);
                // let index = this.target.index
            },
            changeBtn(){
                this.flag = !this.flag
            },
            changeback(){
                this.flag = !this.flag
            }
        },
        // watch:function () {
            
        // }
    }
</script>

<style lang="less">
.boosLists_box{
    .header{
        height: 50px;
        display: flex;
        align-items: center;
        position: relative;
        background-color: white;
        div{
            width: 48px;
            display: flex;
            justify-content: center;
            align-content: center;
        }
        input{
            flex: 1;
            height: 35px;
            background-color: #EEEEEE;
            border-radius: 17px;
            text-indent: 40px;
        }
        .icon-sousuo{
            position: absolute;
            left: 65px;
        }
    }
    .category_box{
        background-color: white;
        .top{
            height: 50px;
            line-height: 50px;
            display: flex;
            padding:0px 18px;
            justify-content: space-between;
            color: #555A65;
            font-size: 14px;
            div{
                i{
                    font-size: 12px;
                }
            }
        }
        .bottom{
            overflow: hidden;
            ul{
                padding: 0px 5px 0px 10px;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                overflow: hidden;
                li{
                    padding: 0px 7px;
                    color: #555A65;
                    font-size: 14px;
                    line-height: 27px;
                    margin: 0 10px 15px 0 ;
                    font-weight: bold;
                    &.active{
                        background-color: red;
                        color: white;
                        border-radius: 5px;
                    }
                }
            }
        }
        .navCommon{
            height: 40px;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            display: flex;
            justify-content: space-between;
            div{
                line-height: 40px;
                padding:0px 5px;
                font-size: 14px;
                color: #777F86;
                &.active{
                    color: red;
                }
            }
        }
        .content{
            .item{
                height: 140px;
                padding-top: 3px;
                display: flex;
                box-sizing: border-box;
                img{
                    width: 125px;
                    height: 125px;
                }
                .text{
                    flex: 1;
                    padding-bottom: 10px;
                    box-sizing: border-box;
                    padding-left: 10px;
                    border-bottom: 1px solid #E4E4E4;
                    .name{
                        color: #444444;
                        font-size: 14px;
                    }
                    .author{
                        font-size: 13px;
                        color: #999999;
                    }
                    .lable{
                        margin-bottom: 2px;
                        span{
                            border: 1px solid red;
                            font-size: 12px;
                            color: red;
                            border-radius: 3px;
                            margin-right: 4px;
                            &.jian{
                                background-color: red;
                                color: white;
                            }
                        }
                    }
                    .price{
                        color: #FF463C;
                        .middle{
                            font-size: 17px;
                        }
                    }
                    .allremark{
                        font-size: 13px;
                        color: #A6A6C4;
                    }
                }
            }
        }
    }
}
</style>